$(function(){
	function Game(){
		//计分
		this.num = 0;
		//速度
		this.speed = 5;
		this.timer = null;
		//动态创建div
		this.createDiv = function(className){
			//创建div
			var rowDiv = document.createElement("div");
			//给div添加类名
			$(rowDiv).addClass("row");
			//在每行的div里面再创建4个div
			for(let i=0;i<4;i++){
				var kuaiDiv = document.createElement("div");
				//给每个块添加类名
				$(kuaiDiv).addClass("kuai");
				//添加到rowDiv里面
				$(rowDiv).append(kuaiDiv);
			}
			//将rowDiv添加到游戏界面
			if($("#main").children().length==0){
				$("#main").append(rowDiv);
			}else {
				$("#main").prepend(rowDiv);
			}
			this.random();
		}
		//生成随机数并给div添加背景色和标记
		this.random = function() {
			//生成一个随机数
			var index = Math.floor(Math.random()*4);
			//给每行中的四个div随机添加一个背景色
			$(".kuai").eq(index).css("background-color","black");
			//标记添加了背景色的div
			$(".kuai").eq(index).addClass("b");
		}
		//移动游戏界面
		this.move = function(){
			clearInterval(this.timer);
			this.timer = setInterval(()=>{
				var step = parseInt($("#main").offset().top)+this.speed; 
				//移动界面
				$("#main").css("top",step+"px");
				//如果界面的top值等于0，就创建新的div并让top重新回到初始位置
				if($("#main").offset().top>=0){
					this.createDiv();
					$("#main").css("top","-20vh");
				}
				//删除边界外的盒子
				if($("#main").children().length>6) {
					//如果有盒子没被点击，即黑盒子的标记还在，则游戏结束
					for (let i=0;i<4;i++){
						if($("#main .row").last().children().eq(i).hasClass("b")){
							clearInterval(this.timer);
							this.gameover();
						}
					}
					$("#main .row").last().remove();
				}
			},20);
			//点击计分
			this.click();
		}
		//点击判断
		this.click = function() {
			$("#main").on("mousedown", (e) => {
				//如果点击的是黑盒子，则加分，并去掉标记
				console.log($(e.target).hasClass("b"));
				if($(e.target).hasClass("b")) {
					$(e.target).removeClass("b");
					e.target.style.backgroundColor = "#ccc";
					this.num++;
					$("#fen").text("得分：" + this.num);
				} else { //如果点击了除黑色盒子之外的，则游戏结束
					$("#main").css("top", "0");
					clearInterval(this.timer);
					this.gameover();
				}
				//每获得30分，进行一次加速
				if(this.num>0&&this.num%30==0) {
					this.speed += 1;
					console.log("速度" + this.speed);
				}
			})
		}
		//点击开始游戏
		this.go = function() {
			$("#index").show();
			$(".start").on("click",()=>{
				//开始前先清空mian中的盒子
				if($("#main").children().length>0){
					$("#main").html("");
				}
				console.log("111")
				//清空计分
				this.num=0;
				//初始化速度
				this.speed=5;
				//隐藏开始界面
				$("#index").hide();
				//开始游戏
				this.move();
			})
		}
		//游戏结束
		this.gameover = function() {
			$("#gameover").show();
			//记录得分
			$(".defen").text("得分："+this.num);
			//点击重新开始
			$(".newGame").on("click",()=>{
				window.location.reload();
			})
		}
	}
	var start = new Game();
	start.go();
});
